<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <title>Flexbox示例</title>
</head>

<body>
    <header>
        <h2>Header</h2>
    </header>
    <div class="body">
        <nav>
            <h2>Navigation</h2>
        </nav>
        <main class="content">
            <div class="percent-layout">
                <div class="grid">
                    <span class="grid-cell cell-1of2">1/2</span>
                    <span class="grid-cell">auto</span>
                    <span class="grid-cell">auto</span>
                </div>
                <div class="grid">
                    <span class="grid-cell">auto</span>
                    <span class="grid-cell cell-1of3">1/3</span>
                </div>
                <div class="grid">
                    <span class="grid-cell cell-1of4">1/4</span>
                    <span class="grid-cell">auto</span>
                    <span class="grid-cell cell-1of3">1/3</span>
                </div>
                <div class="grid">
                    <div class="grid-cell cell-1of4 hang">
                        <img class="avatar" src="https://oixyh3u6e.qnssl.com/livingearth/livingearth.png" width="100px" height="100px">
                        <p>有时，主栏的左侧或右侧，需要添加一个图片栏。有时，主栏的左侧或右侧，需要添加一个图片栏。有时，主栏的左侧或右侧，需要添加一个图片栏。</p>
                    </div>
                    <div class="grid-cell cell-1of4 flow">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </main>
        <aside>
            <h2>Right</h2>
        </aside>
    </div>
    <footer>
        <h2>Footer</h2>
    </footer>
</body>

</html>
